/**
 * 动画调试工具
 * 用于检查和调试glTF模型的动画
 */

export class AnimationDebugger {
    constructor() {
        this.debugPanel = null;
        this.currentModel = null;
        this.animationController = null;
    }

    /**
     * 创建调试面板
     */
    createDebugPanel() {
        if (this.debugPanel) return;

        this.debugPanel = document.createElement('div');
        this.debugPanel.id = 'animation-debug-panel';
        this.debugPanel.style.cssText = `
            position: fixed;
            top: 10px;
            right: 10px;
            width: 300px;
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 15px;
            border-radius: 8px;
            font-family: monospace;
            font-size: 12px;
            z-index: 10000;
            max-height: 80vh;
            overflow-y: auto;
        `;

        document.body.appendChild(this.debugPanel);
    }

    /**
     * 检查模型动画
     * @param {Object} modelData - 模型数据
     * @param {AnimationController} animationController - 动画控制器
     */
    inspectModel(modelData, animationController) {
        this.currentModel = modelData;
        this.animationController = animationController;
        
        this.createDebugPanel();
        this.updateDebugInfo();
    }

    /**
     * 更新调试信息
     */
    updateDebugInfo() {
        if (!this.debugPanel || !this.currentModel) return;

        const animations = this.currentModel.animations || [];
        const bones = this.getBoneList(this.currentModel.model);
        
        let html = `
            <h3>🎭 动画调试器</h3>
            <div style="margin-bottom: 15px;">
                <strong>模型信息:</strong><br>
                - 动画数量: ${animations.length}<br>
                - 骨骼数量: ${bones.length}
            </div>
        `;

        // 动画列表
        if (animations.length > 0) {
            html += `<div style="margin-bottom: 15px;">
                <strong>📋 可用动画:</strong><br>`;
            
            animations.forEach((clip, index) => {
                const duration = clip.duration.toFixed(2);
                html += `- ${clip.name || `animation_${index}`} (${duration}s)<br>`;
            });
            html += `</div>`;

            // 动画测试按钮
            html += `<div style="margin-bottom: 15px;">
                <strong>🎮 测试动画:</strong><br>`;
            
            animations.forEach((clip, index) => {
                const name = clip.name || `animation_${index}`;
                html += `<button onclick="window.animationDebugger.testAnimation('${name}')" 
                    style="margin: 2px; padding: 4px 8px; background: #007AFF; color: white; border: none; border-radius: 4px; cursor: pointer;">
                    ${name}
                </button><br>`;
            });
            html += `</div>`;
        }

        // 骨骼列表
        if (bones.length > 0) {
            html += `<div style="margin-bottom: 15px;">
                <strong>🦴 骨骼结构:</strong><br>`;
            
            bones.slice(0, 10).forEach(bone => {
                html += `- ${bone.name}<br>`;
            });
            
            if (bones.length > 10) {
                html += `... 还有 ${bones.length - 10} 个骨骼<br>`;
            }
            html += `</div>`;
        }

        // 控制按钮
        html += `
            <div>
                <button onclick="window.animationDebugger.stopAllAnimations()" 
                    style="margin: 2px; padding: 4px 8px; background: #FF3B30; color: white; border: none; border-radius: 4px; cursor: pointer;">
                    停止所有动画
                </button>
                <button onclick="window.animationDebugger.hide()" 
                    style="margin: 2px; padding: 4px 8px; background: #8E8E93; color: white; border: none; border-radius: 4px; cursor: pointer;">
                    隐藏面板
                </button>
            </div>
        `;

        this.debugPanel.innerHTML = html;
        
        // 将调试器实例暴露到全局，供按钮调用
        window.animationDebugger = this;
    }

    /**
     * 获取模型的骨骼列表
     * @param {THREE.Object3D} model - 模型对象
     * @returns {Array} 骨骼数组
     */
    getBoneList(model) {
        const bones = [];
        
        model.traverse((child) => {
            if (child.isBone) {
                bones.push(child);
            }
        });
        
        return bones;
    }

    /**
     * 测试指定动画
     * @param {string} animationName - 动画名称
     */
    testAnimation(animationName) {
        if (this.animationController) {
            console.log(`测试动画: ${animationName}`);
            this.animationController.playAnimation(animationName, {
                loop: true,
                crossFade: true
            });
        }
    }

    /**
     * 停止所有动画
     */
    stopAllAnimations() {
        if (this.animationController) {
            this.animationController.stopAnimation();
            console.log('已停止所有动画');
        }
    }

    /**
     * 隐藏调试面板
     */
    hide() {
        if (this.debugPanel) {
            this.debugPanel.style.display = 'none';
        }
    }

    /**
     * 显示调试面板
     */
    show() {
        if (this.debugPanel) {
            this.debugPanel.style.display = 'block';
        }
    }

    /**
     * 销毁调试面板
     */
    dispose() {
        if (this.debugPanel) {
            document.body.removeChild(this.debugPanel);
            this.debugPanel = null;
        }
        
        if (window.animationDebugger === this) {
            delete window.animationDebugger;
        }
    }

    /**
     * 导出动画信息到控制台
     */
    exportAnimationInfo() {
        if (!this.currentModel) return;

        const info = {
            animations: this.currentModel.animations.map(clip => ({
                name: clip.name,
                duration: clip.duration,
                tracks: clip.tracks.length
            })),
            bones: this.getBoneList(this.currentModel.model).map(bone => ({
                name: bone.name,
                position: bone.position.toArray(),
                rotation: bone.rotation.toArray()
            }))
        };

        console.log('模型动画信息:', JSON.stringify(info, null, 2));
        return info;
    }
}

// 创建全局实例
export const animationDebugger = new AnimationDebugger();